<template>
  <div style="height:400px">
    <IEcharts :option="jqTimelist" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  export default {
    components: {
      IEcharts
    },
    data () {
      return {
        userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')),
        // 登录处室信息
        deptPojo: {
          deptId: ''
        },
        jqTimelist: {
          title: {
            text: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            y: 'bottom',
            textStyle: {
              fontSize: 16,
              fontFamily: 'Microsoft YaHei,微软雅黑'
            },
            data: ['数量(件)', '处理时效(天)']
          },
          grid: {
            y: '48px',
            y2: '36px',
            x: '56px',
            x2: '56px',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
              // 调整x轴的lable
              interval: 0, // 全部显示
              clickable: false, // 可点击
              textStyle: {
                fontSize: 12 // 让字体变大
              },
              rotate: 20
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '数量:件',
              axisLabel: {
                // 调整y轴的lable
                textStyle: {
                  fontSize: 14 // 让字体变大
                }
              },
              nameTextStyle: {
                fontSize: 14,
                fontFamily: 'Microsoft YaHei,微软雅黑'
              }
            },
            {
              type: 'value',
              name: '处理时效:天',
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  fontSize: 16 // 让字体变大
                }
              },
              nameTextStyle: {
                fontSize: 16,
                fontFamily: 'Microsoft YaHei,微软雅黑'
              }
            }
          ],
          series: [
            {
              data: [],
              name: '数量(件)',
              type: 'bar',
              barWidth: 40,
              barCategoryGap: '50%',
              itemStyle: {
                normal: {
                  color: '#5AB1EF',
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: 16 // 让字体变大
                  }
                }
              }
            },
            {
              data: [],
              name: '处理时效(天)',
              type: 'line',
              smooth: true,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#2EC7C9',
                  label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      fontSize: 16,
                      fontWeight: 'bolder',
                      fontFamily: 'Microsoft YaHei,微软雅黑'
                    },
                    formatter: '{c}'
                  }
                }
              }
            }
          ]
        }

      }
    },
    created () {
      this.getjqsjList()
    },
    methods: {
      getjqsjList () {
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptEmpWorkEfficiencyCharts, this.deptPojo).then(res => {
          if (res) {
            // console.log(res.empName)
            this.jqTimelist.xAxis.data = res.empName.split(',')
            this.jqTimelist.series[0].data = res.blNum.split(',')
            this.jqTimelist.series[1].data = res.efficiency.split(',')
            if (res.length === 0) {
              this.jqTimelist.title.text = '暂无工单处理量'
            } else {
              this.jqTimelist.title.text = this.$moment().format('YYYY') + '年工单处理量统计'
            }
          }
        })
      }

    }
  }
</script>

<style lang='scss' scoped>
</style>
